<template>
<div id="app">
  <transition-group :name="transitionName">
    <!---############################导航栏#############################-->
    <div key="navigation" v-if="showNavigation" class="navigate-container">
      <div class="left-container"><div @click="handleBack">返回</div></div>
      <div class="center-container"><p>{{naviTitle}}</p></div>
      <div class="right-container"></div>
    </div>
    <!-- ###########################内容################################ -->
    <router-view key="content" class="Router" :class="showNavigation ? 'sub-route' : ''"></router-view>
    <!-- ##########################Tabbar############################## -->
    <ul key="tabbar" v-if="showTabbar" class="tabbar-container">
      <li v-for="(item,index) in tabbarData" class="tabbar-item" :class="item.isSelected ? 'tabbar-item-select' : ''" @click="handleSelectItem(index)">
        <router-link :to="item.path">
          <img :src="item.isSelected ? item.selectedImg : item.unSelectedImg">
          <p class="title">{{item.title}}</p>
        </router-link>
      </li>
    </ul>
  </transition-group>
</div>
</template>

<script>
export default {
  name: 'app',
  data: function() {
    return {
      transitionName: 'slide-right', // 默认动态路由变化为slide-right
      showTabbar:true,
      showNavigation:false,
      naviTitle:"",
      tabbarData:[
        {title:'首页',path:'/',unSelectedImg:'../static/images/home.png',selectedImg:'../static/images/home.png',isSelected:true},
        {title:'我的',path:'/person-center',unSelectedImg:'../static/images/my.png',selectedImg:'../static/images/my.png',isSelected:false}
      ],
    }
  },
  mounted() {
    let currentRoute = this.$router.history.current;
    this.handleNavigateAndTabbarShow(currentRoute);
  },
  watch: {　　　
    '$route': function(to, from) {
      //  监听路由变化时的状态为前进还是后退
      console.log(to);
      console.log(from);
      let isBack = this.$router.isBack
      if (isBack) {　　　　　　　　
        this.transitionName = 'slide-right'　　　　　　
      } else {　　
        let toIndex = this.matchItem(to.path);　　　　
        let fromIndex = this.matchItem(from.path);　　　
        if (toIndex < fromIndex) {
          this.transitionName = 'slide-right'
        }else {
          this.transitionName = 'slide-left'
        }　　　
      }
      this.$router.isBack = false;
      //  控制导航栏和底部Tabbar的显示
      this.handleNavigateAndTabbarShow(to);
    }
  },
  methods:{
    //底部导航栏切换
    handleSelectItem:function (index) {
      for (var i = 0; i < this.tabbarData.length; i++) {
        if (index == i) {
          this.tabbarData[i].isSelected = true;
        }else {
          this.tabbarData[i].isSelected = false;
        }
      }
    },
    //  导航栏和底部Tabbar的显示和隐藏
    handleNavigateAndTabbarShow:function (currentRoute) {
      if (this.matchPath(currentRoute)) {
        this.showTabbar = true;
        this.showNavigation = false;
      }else {
        this.showTabbar = false;
        this.showNavigation = true;
        this.naviTitle = currentRoute.name;
      }
      for (var i = 0; i < this.tabbarData.length; i++) {
        if (this.tabbarData[i].path == currentRoute.path) {
          this.tabbarData[i].isSelected = true;
        }else {
          this.tabbarData[i].isSelected = false;
        }
      }
    },
    //返回
    handleBack:function () {
      router.goBack();
    },
    //匹配tabbar
    matchItem:function (path) {
      let itemIndex = 99;
      for (var i = 0; i < this.tabbarData.length; i++) {
        if (path == this.tabbarData[i].path) {
          itemIndex = i;
          break;
        }
      }
      return itemIndex;
    },
    //匹配路径
    matchPath:function (route) {
      for (var i = 0; i < this.tabbarData.length; i++) {
        if (route.path == this.tabbarData[i].path) {
          return true;
        }
      }
      return false;
    }
  },
}
</script>

<style lang="less">
@import "./assets/less/entry.less";
</style>
